<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我自己写的Sphere</title>
  <style type="text/css">
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>

  <script type="text/javascript" src="assets/javascripts/three.js"></script>
  <script type="text/javascript" src="assets/javascripts/dat.gui.min.js"></script>
  <script type="text/javascript" src="assets/javascripts/OrbitControls.js"></script>
  <script type="text/javascript">
    var scene, camera, renderer, control;

    function init () {
      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera.position.set(0, 20, 50);
      camera.lookAt(scene.position);

      renderer = new THREE.WebGLRenderer( {antialias: true} );
      renderer.setClearColor(0x000000, 1.0);
      renderer.setSize(window.innerWidth, window.innerHeight);

      var sphereGeometry = new THREE.SphereGeometry( 15, 30, 20 ); 
      var sphereMaterial = new THREE.MeshNormalMaterial();
      var earthMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
      earthMesh.name = "earth";
      scene.add(earthMesh);

      camera.lookAt(earthMesh.position);
      cameraControl = new THREE.OrbitControls(camera);

      var boxGeometry = new THREE.BoxGeometry(5, 5, 5);
      var boxMaterial = new THREE.MeshNormalMaterial();
      var box = new THREE.Mesh(boxGeometry, boxMaterial);
      box.name = 'box';
      box.position.set(20, 0, 0);
      scene.add(box);

      var lineXGeometry = new THREE.Geometry();
      var lineXMaterial = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
      var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

      // 线的材质可以由2点的颜色决定
      var p1 = new THREE.Vector3( 25, 0, 0 );
      var p2 = new THREE.Vector3(  -25, 0, 0 );
      lineXGeometry.vertices.push(p1);
      lineXGeometry.vertices.push(p2);
      lineXGeometry.colors.push( color1, color2 );

      var lineX = new THREE.Line( lineXGeometry, lineXMaterial, THREE.LinePieces );
      lineX.name = 'lineX';
      scene.add(lineX);

      var lineYGeometry = new THREE.Geometry();
      var lineYMaterial = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

      // 线的材质可以由2点的颜色决定
      p1 = new THREE.Vector3( 0, 25, 0 );
      p2 = new THREE.Vector3(  0, -25, 0 );
      lineYGeometry.vertices.push(p1);
      lineYGeometry.vertices.push(p2);
      lineYGeometry.colors.push( color1, color2 );

      var lineY = new THREE.Line( lineYGeometry, lineYMaterial, THREE.LinePieces );
      scene.add(lineY);

      var lineZGeometry = new THREE.Geometry();
      var lineZMaterial = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

      // 线的材质可以由2点的颜色决定
      p1 = new THREE.Vector3( 0, 0, 25 );
      p2 = new THREE.Vector3(  0, 0, -25 );
      lineZGeometry.vertices.push(p1);
      lineZGeometry.vertices.push(p2);
      lineZGeometry.colors.push( color1, color2 );

      var lineZ = new THREE.Line( lineZGeometry, lineZMaterial, THREE.LinePieces );
      lineZ.name = 'lineZ';
      scene.add(lineZ);

      control = new function() {
        this.rotationSpeedX = 0.005;
        this.rotationSpeedY = 0.005;
      };
      addControlGui(control);

      document.body.appendChild(renderer.domElement);
      render();
    }

    function initLight() {
      var spotLight = new THREE.AmbientLight( 0xFFFFFF);
      spotLight.position.set(50, 20, 20);
      scene.add(spotLight);
    }

    function addControlGui(controlObject) {
        var gui = new dat.GUI();
        gui.add(controlObject, 'rotationSpeedX', -0.01, 0.01);
        gui.add(controlObject, 'rotationSpeedY', -0.01, 0.01);
    }

    function render () {
      // var earth = scene.getObjectByName('earth');
      // var lineX =  scene.getObjectByName('lineX');
      // var lineZ =  scene.getObjectByName('lineZ');
      // earth.rotation.y += control.rotationSpeedY;
      // lineX.rotation.y += control.rotationSpeedY;
      // lineZ.rotation.y += control.rotationSpeedY;

      // earth.rotation.x += control.rotationSpeedX;

      cameraControl.update();

      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    window.onload = init;
  </script>
</head>
<body>
  
</body>
</html>